/**
 * Created by 银信数据科技 on 2018/2/28.
 */
import React from 'react';
import {Layout, Menu, Icon ,Avatar ,Badge} from 'antd';
import styles from './BasicLayout.less';
const { Header, Sider, Content } = Layout;

class BasicLayout extends React.Component {
    state = {
      collapsed:false,
      collapsedWidth:80,
      breakpoint:'lg'
    };
    toggle = () =>{
      this.setState({
        collapsed:!this.state.collapsed,

      })
    };
    colse=(collapsed,type)=>{//根据breakpoint值修改菜单栏状态
      let off;
      let collapsedWidth;
      switch(this.state.breakpoint){
        case 'lg':
          off=false;
          collapsedWidth=80;
          break;
        case 'md':
          off=true;
          collapsedWidth=80;
          break;
        case 'sm':
          off=true;
          collapsedWidth=0;
          break;
        default:
          break;
      }
      this.setState({
        collapsed:off,
        collapsedWidth:collapsedWidth
      })
    };
    bodyWidth = () =>{ //根据窗口宽度修改text值
      let text='lg';
      if(document.body.clientWidth>992){
        text='lg'
      }else if(document.body.clientWidth<992&&document.body.clientWidth>768){
        text='md'
      }else if(document.body.clientWidth<768){
        text='sm'
      }
      return text
    };

    point = () =>{ //检测窗口宽度
      var _this=this
      _this.setState({
        breakpoint:_this.bodyWidth()
      })
      window.onresize=()=>{
        _this.setState({
          breakpoint:_this.bodyWidth()
        });
        _this.colse()
      }
    };
    componentWillMount(){
      this.point()
    };
    render() {
      return (
        <Layout className={styles.BasicLayout}>
          <Sider
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
            breakpoint={this.state.breakpoint}
            collapsedWidth={this.state.collapsedWidth}
            onCollapse={this.colse}
          >
            <div className="logo" />
              <Menu
                theme="dark"
                mode="inline"
                defaultSelectedKeys={['1']}
              >
                <Menu.Item key="1">
                  <Icon type="user"/>
                  <span>nav 1</span>
                </Menu.Item>
                <Menu.Item key="2">
                  <Icon type="video-camera"/>
                  <span>nav 2</span>
                </Menu.Item>
                <Menu.Item key="3">
                  <Icon type="upload"/>
                  <span>nav 3</span>
                </Menu.Item>
              </Menu>
          </Sider>
          <Layout>
            <Header style={{background:'#fff',padding:0}}>
              <Icon
                className="trigger"
                type={this.state.collapsed?'menu-unfold':'menu-fold'}
                onClick={this.toggle}
              />
              <span className="user">
                 <span className="icon"><Badge count={1}><Avatar shape="square" icon="user" /></Badge></span>
                 <span className="icon"><Badge><Avatar shape="square"  icon="setting" /></Badge></span>
              </span>
            </Header>
              <Content style={{margin:'24px 16px',padding:24, background:'#fff',minHeight:280}}>
                Content
              </Content>
          </Layout>
        </Layout>
      )
    }
}
export default BasicLayout
